// 来源这里： https://gitee.com/qwswqwe/leaflet-user-define-theme
// 对应的文章在这里：https://blog.csdn.net/qq_58771242/article/details/132981229
// 用于修改图层的颜色，如果在options中有color选项，则会使用该颜色来对图片的颜色做反转
// 有了这个思路之后，如果以后需要对瓦片做什么特殊处理，比如叠加显示一个特定的文本，也是可以的

/*
 * @Author: zb
 * @Date: 2023-09-18 16:23:04
 * @LastEditTime: 2023-09-18 16:23:15
 * @FilePath: \yangtze-outlet-web2\src\pages\BigScreenHome\DesingMap\index.ts
 * @页面功能: 加载自定义颜色的地图底图
 */
import L from "leaflet/src/Leaflet";
class DesignTileLayer extends L.TileLayer {
  createTile(coords, done) {
    const { color } = this.options;
    if(!color){
      return super.createTile(coords, done)
    }
    /**获取外部接受的颜色*/
    console.warn("createTile", this.options);
    
    console.warn("createTile color", color);

    // 创建一个用于绘图的 <canvas> 元素
    var tile = L.DomUtil.create("canvas", "leaflet-tile");

    // 根据选项设置瓦片的宽度和高度
    var size = this.getTileSize();
    tile.width = size.x;
    tile.height = size.y;

    // 获得一个 canvas 上下文，并使用 coords.x、coords.y 和 coords.z 在上面画东西
    var ctx = tile.getContext("2d");

    // 使用传入的 URL 模板替换变量
    var url = this.getTileUrl(coords);
    // 创建一个图像对象来加载瓦片
    var img = new Image();
    // 解决跨域的问题，https://blog.csdn.net/leftfist/article/details/106947101
    img.setAttribute("crossOrigin", "");
    // 以下是TileLayer的createTile方法内对于跨域的处理，可以考虑参考下
    // https://github.com/Leaflet/Leaflet/blob/21d27856f2e314d267ea6120363eb60660bae123/src/layer/tile/TileLayer.js#L145
    //   if (this.options.crossOrigin || this.options.crossOrigin === "") {
    //     tile.crossOrigin =
    //       this.options.crossOrigin === true ? "" : this.options.crossOrigin;
    //   }

    //   // for this new option we follow the documented behavior
    //   // more closely by only setting the property when string
    //   if (typeof this.options.referrerPolicy === "string") {
    //     tile.referrerPolicy = this.options.referrerPolicy;
    //   }
    img.src = url; // 替换为你的图片路径

    // 当图片加载完成后，绘制到 Canvas 上    
    img.onload =  ()=> {
      // 绘制图片到 Canvas 上
      console.warn("img onLoad", tile.width, tile.height);
      ctx.drawImage(img, 0, 0, tile.width, tile.height);
      // 获取图像的像素数据
      var imageData = ctx.getImageData(0, 0, tile.width, tile.height);
      if (color) {
        // 获取原来的图片的像素颜色
        var pixels = imageData.data;
        for (let i = 0; i < pixels.length; i += 4) {
          const r = pixels[i],
            g = pixels[i + 1],
            b = pixels[i + 2],
            a = pixels[i + 3];
          //计算灰度
          var grayVal = (r + g + b) / 3;
          //灰度反转--会使图片整体变成灰色--方便上色
          grayVal = 255 - grayVal;
          //将灰度替换掉原始的颜色
          pixels[i] = grayVal + color.r;
          pixels[i + 1] = grayVal + color.g;
          pixels[i + 2] = grayVal + color.b;
          //设置一个前景透明度，以便和背景混合
          if (color.a) {
            pixels[i + 3] = a * color.a;
          }
        }
      }

      // 将修改后的像素数据放回 Canvas
      ctx.putImageData(imageData, 0, 0);
      this._tileOnLoad(done, img);
    };
    // 返回瓦片，以便在屏幕上呈现
    return tile;
  }  
}
export default DesignTileLayer;
